<template>
    <div class="contract">
        <ContentWrap class="left">
            <div class="card-header">
                <button>返回列表</button>
            </div>
            <div class="main">
                <h3 class="title">水泥购销合同--水泥商</h3>
                <div class="main-tit">
                    <div class="main-content">
                        <p class="main-p">基本信息</p>
                        <div class="main-hez">
                            <div class="main-left">
                                <p>签订对象：<span>国贸</span></p>
                                <p>签订时间：<span>2022-10-18</span></p>
                                <p>签订状态： <el-tag class="ml-2" type="danger">未签订</el-tag></p>
                            </div>
                            <div class="main-right">
                                <p>商砼企业：<span>厦门市政一建</span></p>
                                <p>到期时间：<span>2022-10-15</span></p>
                                <p>项目：<span>厦门双子塔</span></p>
                            </div>
                        </div>
                    </div>

                    <div class="main-content">
                        <p class="main-p">商品信息</p>
                        <div class="scoll">
                            <div class="main-hezi">
                                <div class="shoping">
                                    <p>铝酸盐水泥CA50-A600</p>
                                </div>
                                <el-divider />
                                <div class="below">
                                    <p class="xh"><span class="cx">春熙牌</span>铝酸盐水泥CA50-A600</p>
                                    <p class="number"> 500吨</p>
                                    <p class="timer">有效期 2022年10月15日至2022年11月-15日</p>
                                </div>
                            </div>

                            <div class="main-hezi">
                                <div class="shoping">
                                    <p>铝酸盐水泥CA50-A600</p>
                                </div>
                                <el-divider />
                                <div class="below">
                                    <p class="xh"><span class="cx">春熙牌</span>铝酸盐水泥CA50-A600</p>
                                    <p class="number"> 500吨</p>
                                    <p class="timer">有效期 2022年10月15日至2022年11月-15日</p>
                                </div>
                            </div>

                            <div class="main-hezi">
                                <div class="shoping">
                                    <p>铝酸盐水泥CA50-A600</p>
                                </div>
                                <el-divider />
                                <div class="below">
                                    <p class="xh"><span class="cx">春熙牌</span>铝酸盐水泥CA50-A600</p>
                                    <p class="number"> 500吨</p>
                                    <p class="timer">有效期 2022年10月15日至2022年11月-15日</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div style="display: flex;flex-direction: row-reverse;">
                        <el-button type="primary">确认网签</el-button>
                    </div>
                </div>
            </div>
        </ContentWrap>
        <ContentWrap class="right">
            <img src="../../../assets/imgs/avatar.gif" alt="">
        </ContentWrap>
    </div>
</template>

<script setup lang="ts">


</script>

<style lang="scss" scoped>
.contract {
    display: flex;
    width: 100%;
    height: 100%;

    .drop {
        width: 8px;
        height: 8px;
        border: 2px solid rgba(81, 123, 255, 1);
    }

    .left {
        border-radius: 20px;
        margin-right: 20px;
        height: 100%;

        .card-header {
            span {
                font-size: 12px;
            }
        }

        .main {
            .title {
                font-size: 22px;
                font-weight: 500;
                margin: 24px 0px;
            }

            .main-tit {
                .main-content {
                    margin-bottom: 7px;

                    .main-p {
                        font-size: 16px;
                        font-weight: 500;
                        margin-bottom: 14px;
                    }

                    // 文字前面的点
                    .main-p::before {
                        content: "●";
                        display: inline-block;
                        width: 10px;
                        height: 10px;
                        margin-right: 10px;
                        color: rgba(81, 123, 255, 1);
                        ;
                    }

                    .stamp {
                        display: flex;
                        border-radius: 16px;
                        background: rgba(249, 250, 255, 1);
                        justify-content: space-between;
                        padding: 24px;

                        img {
                            width: 150px;
                            border-radius: 20px;
                        }
                    }

                    .main-hezi {
                        border-radius: 16px;
                        background: rgba(249, 250, 255, 1);
                        padding: 14px 24px;
                        margin-bottom: 11px;

                        .shoping {
                            display: flex;
                            justify-content: space-between;
                            width: 100%;

                            p {
                                color: #7c7d7f;
                            }

                            .el-progress {
                                width: 40%;
                            }
                        }

                        .below {
                            .xh {
                                font-size: 14px;
                                color: rgba(0, 0, 0, 1);
                                margin-bottom: 8px;

                                .cx {
                                    font-size: 17px;
                                    margin-right: 10px;
                                }
                            }

                            .number,
                            .timer {
                                color: #7c7d7f;
                                font-size: 14px;
                            }
                        }

                    }

                    .main-hez {
                        display: flex;
                        border-radius: 16px;
                        background: rgba(249, 250, 255, 1);
                        padding: 14px 24px;

                        .shoping {
                            display: flex;
                            justify-content: space-between;
                            width: 100%;

                            .el-progress {
                                width: 40%;
                            }
                        }

                        .main-left {
                            margin-right: 70px;

                            p {
                                margin: 10px 0px;
                            }
                        }

                        .main-right {
                            p {
                                margin: 10px 0px;
                            }
                        }
                    }
                }
            }
        }
    }

    .right {
        flex: 1;
        border-radius: 20px;

        img {
            width: 1112px;
            height: 800px;
            border-radius: 20px;
        }
    }

}

::v-deep.el-divider--horizontal {
    margin: 1px 0px 10px 0px;
}

.scoll {
    overflow-y: auto;
    height: 220px;

}

.scoll::-webkit-scrollbar {
    display: none;
}
</style>